<template>
  <div class="share" v-if="showMaskShare" @click="close">
    <div class="rows">
      <div class="row1">
        <div class="sort">1</div>
        <div>点击右上角</div>
        <div class="gray">
          <image src="/static/ddd.png" mode=""></image>
        </div>
        <div>按钮</div>
      </div>
      <div class="row2">
        <div class="sort">2</div>
        <div>选择</div>
        <div class="gray">
          <image src="/static/web.png" mode=""></image>
          <div>在浏览器中打开</div>
        </div>
      </div>
    </div>
    <image class="jiantou" src="/static/jiantou.png" mode=""></image>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue"
const showMaskShare = ref(false)
const data = ref({
  canClose: false
})

function open() {
  showMaskShare.value = true
}
function close() {
  if (data.value.canClose) {
    showMaskShare.value = false
  }
}

defineExpose({
  open
})

</script>

<style lang="scss" scoped>
.share {
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100vh;
  background: rgba(#000000, 0.5);
  color: #fff;

  .rows {
    position: absolute;
    width: 400rpx;
    top: 160rpx;
    left: 50%;
    transform: translateX(-50%);

    .sort {
      color: #919191;
      background-color: #ffffff;
      width: 40rpx;
      height: 40rpx;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .gray {
      padding: 4rpx 10rpx;
      background-color: #fff;
      display: flex;
      gap: 10rpx;
      align-items: center;
      border-radius: 8rpx;
      color: #333333;

      image {
        width: 32rpx;
        height: 32rpx;
      }
    }

    .row1 {
      display: flex;
      align-items: center;
      gap: 10rpx;

      image {
        width: 36rpx;
        height: 20rpx;
      }
    }

    .row2 {
      margin-top: 40rpx;
      display: flex;
      gap: 10rpx;
      align-items: center;
    }
  }

  .jiantou {
    position: absolute;
    top: 0;
    right: 40rpx;
    width: 137.75rpx;
    height: 148rpx;
  }
}
</style>